<template>
  <div class='project-warp'>
  <div class="project-form"
       :style="{backgroundColor:projectTheme.themeColor}">
    <div>
      <el-image v-if='projectTheme.themeImgUrl' :src='this.projectTheme.themeImgUrl'>
      </el-image>
      <h4 class='form-name-text' v-if='projectTheme.showTitle' style='text-align: center'>
        {{formConfig.title}}
      </h4>
      <div
        v-show="projectTheme.showDescribe"
        class="form-name-text" v-html="formConfig.description">
      </div>
      <el-divider>
      </el-divider>
      <parser v-if="startParser" :form-conf="formConfig" @submit='submitForm'/>
    </div>
  </div>
  </div>
</template>

<script>
  import Parser from '@/components/parser/Parser'
  import { dbDataConvertForItemJson } from '@/utils/convert'

  export default {
    name: 'ProjectForm',
    props: {
      projectConfig: {
        projectKey: '',
        showBtns: true
      }
    },
    components: {
      parser: Parser
    },
    data() {
      return {
        startParser: false,
        projectTheme: {
          showTitle: true,
          showDescribe: true,
          themeImgUrl: '',
          themeColor: '',
          themeId: 0,
          btnColor: ''
        },
        formConfig: {
          title: '',
          description: '',
          projectKey: '',
          projectKind: 1,
          span: 25,
          submitBtnText: '提交',
          showBtns: true,
          fields: [],
          __methods__: {},
          formRef: 'elForm',
          formModel: 'formData',
          labelFormModel: 'labelFormDate',
          size: 'small',
          labelPosition: 'top',
          labelWidth: 100,
          formRules: 'rules',
          gutter: 15,
          disabled: false,
          formBtns: true,
          resetBtns: false,
          submitBtnColor: '#68e0fc',
          showNumber: false,
          unFocusedComponentBorder: true
        }
      }
    },
    beforeCreate() {
      // document.querySelector 获取文档中 id="body" 的元素 className 属性设置或返回元素的 class 属性。
      document.querySelector('body').className = 'project-body'
    },
    created () {
      this.src = this.url
      if (this.projectConfig) {
        this.formConfig.projectKey = this.projectConfig.projectKey
      } else if (this.$route.query.key) {
        //不存去路由中尝试获取 iframe
        this.formConfig.projectKey = this.$route.query.key
      }
      this.formConfig.showBtns = true

    },
    mounted () {
      console.log('this.$route', this.$route)
      let url
      if(this.$route.path === "/index/category" || this.$route.path === "/index/courseProject/" || this.$route.query.isTemplate) {
        url = `/template/preview/${this.formConfig.projectKey}`
      } else {
        url = `/project/preview/${this.formConfig.projectKey}`
      }
      this.$http.get(url).then(res => {
        // console.log('--------hzy-res',res)
        if (res.data.data) {
          let serialNumber = 1
          const fields = res.data.data.projectItems.map(item => {
            console.log('item',item)
            const projectItem = dbDataConvertForItemJson(item, serialNumber)
            // console.log('projectItem',projectItem)
            projectItem.serialNumber = serialNumber
            serialNumber++
            return projectItem
          })
          this.formConfig.fields = fields
          // console.log('fields ', fields)
          this.formConfig.title = res.data.data.userProject.projectName
          // console.log(this.formConfig.title)
          this.formConfig.description = res.data.data.userProject.projectDescribe
        }

        if (!this.$route.query.key) {
        this.setPhoneWidth()
        }
        this.startParser = true
        console.log('res.data.data.projectTheme.themeId',res.data.data.projectTheme.themeId)
        if (res.data.data.projectTheme.themeId) {
          this.projectTheme.themeColor = res.data.data.projectTheme.themeColor
          this.projectTheme.themeImgUrl = res.data.data.projectTheme.themeImgUrl
          this.projectTheme.themeId = res.data.data.projectTheme.themeId
          console.log('this.projectTheme--------', this.projectTheme)
        }
      })

    },
    methods: {
      setPhoneWidth() {
        const preHtml = document.querySelector('#preview-html').contentDocument
        const inFrameApp = preHtml.querySelector('#app')
        inFrameApp.className = 'phone-view'
        console.log('==-=-==',inFrameApp)
      },
      submitForm (data) {
        this.$emit('submitForm',data)
        console.log('------------', data)
      }
    }
  }
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
  .project-warp {
    height: 100vh;
    overflow: scroll;
  }
  .project-form {
    box-sizing: border-box;
    margin: 15px auto;
    padding: 15px;
    width: 740px;
    background-color: #f4fafb;
  }
  .form-name-text {
    margin: 15px;
  }

  .form-name-text input {
    border: none;
    background-color: transparent;
  }

  @media screen and (max-width: 750px){
    .project-form {
      margin: 0px;
      //height: 100%;
      width: 100%;

    }

  }
  @media screen and (max-width: 500px) {
    .el-message {
      min-width: 300px !important;
    }
    .project-form{
    }
  }
  ::-webkit-scrollbar{
    display: none;
    width: 0;
  }
</style>
